<template>
  <div class="news-page">
    <!-- 新闻分类导航 -->
    <div class="news-nav">
      <div class="nav-container">
        <div 
          v-for="category in newsCategories" 
          :key="category.key"
          class="nav-item"
          :class="{ active: activeCategory === category.key }"
          @click="switchCategory(category.key)"
        >
          {{ category.name }}
        </div>
      </div>
    </div>

    <!-- 新闻内容区域 -->
    <div class="news-content">
      <div class="content-container">
        <div class="news-list">
          <div 
            v-for="(article, index) in currentArticles" 
            :key="index"
            class="news-item"
            @click="goToDetail(article)"
          >
            <div class="news-image">
              <img :src="article.image" :alt="article.title" />
            </div>
            <div class="news-info">
              <div class="news-meta">
                <span class="news-category">{{ getCategoryName(article.category) }}</span>
                <span class="news-date">{{ article.date }}</span>
              </div>
              <h3 class="news-title">{{ article.title }}</h3>
              <p class="news-summary">{{ article.summary }}</p>
              <div class="news-tags">
                <span 
                  v-for="tag in article.tags" 
                  :key="tag"
                  class="tag"
                >
                  {{ tag }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination" v-if="totalPages > 1">
          <button 
            class="page-btn"
            :disabled="currentPage <= 1"
            @click="changePage(currentPage - 1)"
          >
            上一页
          </button>
          <span class="page-info">
            第 {{ currentPage }} 页，共 {{ totalPages }} 页
          </span>
          <button 
            class="page-btn"
            :disabled="currentPage >= totalPages"
            @click="changePage(currentPage + 1)"
          >
            下一页
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewsPage',
  data() {
    return {
      activeCategory: 'latest',
      currentPage: 1,
      pageSize: 6,
      newsCategories: [
        { key: 'latest', name: '最新' },
        { key: 'updates', name: '动态' },
        { key: 'announcements', name: '公告' },
        { key: 'events', name: '活动' },
        { key: 'news', name: '资讯' }
      ],
      newsData: {
        latest: [
          {
            id: 13,
            title: '新女武神「月下初拥·丽塔」即将登场',
            summary: '全新S级女武神「月下初拥·丽塔」即将在下个版本与舰长们见面！作为冰属性辅助型女武神，她将为队伍带来强大的支援能力。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/157811/92333adce61e1a9e75591e2741dcfd97_7957877470594159892.png',
            date: '2025/02/05',
            category: 'updates',
            tags: ['新角色', '丽塔', '冰属性']
          },
          {
            id: 14,
            title: '「星穹铁道」联动活动预告',
            summary: '《崩坏3》与《崩坏：星穹铁道》联动活动即将开启！跨越星海的冒险等待着舰长们，更有限定角色和装备等你获取！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/156251/ea55b240730debec811239cbb393a7bb_2296978660569028145.png',
            date: '2025/02/03',
            category: 'events',
            tags: ['联动', '星穹铁道', '限定']
          },
          {
            id: 1,
            title: '淬星激斗｜参与活动获取水晶、根源接缘等奖励！',
            summary: '一人选战，三人协攻，在深邃的星光下战斗不休！「淬星激斗」活动开启，舰长通关单人作战区域，可获得淬环星砾，用于提升星之环等级，强化对应星之环效果。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/157811/92333adce61e1a9e75591e2741dcfd97_7957877470594159892.png',
            date: '2025/01/31',
            category: 'events',
            tags: ['活动', '奖励', '水晶']
          },
          {
            id: 2,
            title: '《崩坏3》同人作品作品制作指引｜V3.0',
            summary: '《崩坏3》第三期同人指引上线，为了更好的规范同人创作的内容制作与合规要求，我们制作了下述指引。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/156251/ea55b240730debec811239cbb393a7bb_2296978660569028145.png',
            date: '2024/01/10',
            category: 'announcements',
            tags: ['同人', '指引', '创作']
          },
          {
            id: 3,
            title: '群升补给｜群天东流·璀璨',
            summary: '全新W级装备群天东流·璀璨登场！「群天东流·璀璨」专属补给开启中！舰长「群天东流·璀璨」去获取吧！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/155185/0f94a55230acd105296b52e8037c2150_346690974827127744.png',
            date: '2022/09/02',
            category: 'updates',
            tags: ['补给', '装备', '璀璨']
          },
          {
            id: 4,
            title: '群升武器｜十相秘藏武之所见',
            summary: '群升武器「十相秘藏」与「武之所见」登场！全新武器强化系统等你体验！！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/127351/a3734f77846f906a99dc0aa739ab6ae9_1085305199320833304.png',
            date: '2022/09/02',
            category: 'updates',
            tags: ['武器', '强化', '系统']
          }
        ],
        updates: [
          {
            id: 15,
            title: '全新武器系统「神之键·第零额定功率」上线',
            summary: '全新武器系统正式上线！神之键系列武器迎来全面升级，第零额定功率解锁，为舰长们带来前所未有的战斗体验！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/155185/0f94a55230acd105296b52e8037c2150_346690974827127744.png',
            date: '2025/02/04',
            category: 'updates',
            tags: ['武器系统', '神之键', '升级']
          },
          {
            id: 5,
            title: 'V7.3版本「幻海梦蝶」正式上线',
            summary: '全新版本「幻海梦蝶」现已上线！新女武神「渡鸦·幻海」登场，全新主线章节开启，更多精彩内容等你体验！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/157811/92333adce61e1a9e75591e2741dcfd97_7957877470594159892.png',
            date: '2025/01/30',
            category: 'updates',
            tags: ['版本更新', '新角色', '主线']
          },
          {
            id: 6,
            title: '新女武神「渡鸦·幻海」技能详解',
            summary: '「渡鸦·幻海」作为全新的雷属性女武神，拥有独特的幻海机制和强大的输出能力，让我们一起了解她的技能特点。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/156251/ea55b240730debec811239cbb393a7bb_2296978660569028145.png',
            date: '2025/01/28',
            category: 'updates',
            tags: ['新角色', '技能', '雷属性']
          }
        ],
        announcements: [
          {
            id: 7,
            title: '春节假期客服服务时间调整公告',
            summary: '亲爱的舰长们，春节假期期间（2月9日-2月17日），客服服务时间将有所调整，具体安排如下...',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/155185/0f94a55230acd105296b52e8037c2150_346690974827127744.png',
            date: '2025/02/01',
            category: 'announcements',
            tags: ['客服', '春节', '时间调整']
          },
          {
            id: 8,
            title: '游戏维护公告 - 2025年1月版本更新',
            summary: '为了给舰长们带来更好的游戏体验，我们将于2025年1月30日进行版本更新维护，维护时间预计4小时。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/127351/a3734f77846f906a99dc0aa739ab6ae9_1085305199320833304.png',
            date: '2025/01/29',
            category: 'announcements',
            tags: ['维护', '更新', '公告']
          }
        ],
        events: [
          {
            id: 16,
            title: '「永恒乐土」深层序列挑战赛',
            summary: '全新挑战赛「永恒乐土·深层序列」开启！挑战更高难度的永恒乐土关卡，获得稀有材料和专属称号！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/127351/a3734f77846f906a99dc0aa739ab6ae9_1085305199320833304.png',
            date: '2025/02/06',
            category: 'events',
            tags: ['挑战赛', '永恒乐土', '高难度']
          },
          {
            id: 9,
            title: '新春庆典活动 - 龙年大吉',
            summary: '新春佳节即将到来，「龙年大吉」庆典活动现已开启！参与活动可获得丰厚奖励，包括水晶、材料、限定装扮等。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/157811/92333adce61e1a9e75591e2741dcfd97_7957877470594159892.png',
            date: '2025/02/01',
            category: 'events',
            tags: ['新春', '庆典', '限定奖励']
          },
          {
            id: 10,
            title: '情人节特别活动 - 甜蜜时光',
            summary: '情人节即将到来，「甜蜜时光」特别活动开启！与你喜爱的女武神一起度过浪漫时光，获得专属奖励。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/156251/ea55b240730debec811239cbb393a7bb_2296978660569028145.png',
            date: '2025/02/10',
            category: 'events',
            tags: ['情人节', '浪漫', '特别活动']
          }
        ],
        news: [
          {
            id: 17,
            title: '《崩坏3》获得2024年度最佳移动游戏奖',
            summary: '在刚刚结束的2024年度游戏大奖评选中，《崩坏3》凭借其出色的剧情表现和创新玩法，荣获"年度最佳移动游戏"大奖！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/157811/92333adce61e1a9e75591e2741dcfd97_7957877470594159892.png',
            date: '2025/02/02',
            category: 'news',
            tags: ['获奖', '年度大奖', '荣誉']
          },
          {
            id: 11,
            title: '《崩坏3》动画短片「永恒乐土」制作花絮',
            summary: '《崩坏3》最新动画短片「永恒乐土」制作花絮公开！让我们一起走进制作团队，了解这部精彩动画的诞生过程。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/155185/0f94a55230acd105296b52e8037c2150_346690974827127744.png',
            date: '2025/01/25',
            category: 'news',
            tags: ['动画', '制作花絮', '永恒乐土']
          },
          {
            id: 12,
            title: '《崩坏3》全球玩家突破1.5亿',
            summary: '感谢全球舰长们的支持！《崩坏3》全球注册玩家数量已突破1.5亿，让我们一起继续这段精彩的冒险旅程！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/127351/a3734f77846f906a99dc0aa739ab6ae9_1085305199320833304.png',
            date: '2025/01/20',
            category: 'news',
            tags: ['里程碑', '玩家数量', '感谢']
          }
        ]
      }
    }
  },
  computed: {
    currentArticles() {
      const articles = this.newsData[this.activeCategory] || []
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return articles.slice(start, end)
    },
    totalPages() {
      const articles = this.newsData[this.activeCategory] || []
      return Math.ceil(articles.length / this.pageSize)
    }
  },
  methods: {
    switchCategory(category) {
      this.activeCategory = category
      this.currentPage = 1
    },
    getCategoryName(categoryKey) {
      const category = this.newsCategories.find(cat => cat.key === categoryKey)
      return category ? category.name : categoryKey
    },
    goToDetail(article) {
      this.$emit('show-detail', article)
    },
    changePage(page) {
      this.currentPage = page
    }
  }
}
</script>

<style scoped>
.news-page {
  min-height: 100vh;
  background: rgba(0, 0, 0, 0.7);
}

/* 新闻导航样式 */
.news-nav {
  background: transparent;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 0 20px;
}

.nav-item {
  padding: 12px 24px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 25px;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.nav-item.active {
  color: #fff;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

/* 新闻内容样式 */
.news-content {
  padding: 40px 0;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.news-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.news-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.news-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-item:hover .news-image img {
  transform: scale(1.05);
}

.news-info {
  padding: 20px;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.news-category {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.news-date {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.news-title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-summary {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}

.page-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-container {
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .nav-item {
    padding: 8px 16px;
    font-size: 14px;
  }
  
  .news-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .content-container {
    padding: 0 15px;
  }
}
</style>